{% extends "base.html" %}

{% block title %}Payment Approvals - Quick Care Connect{% endblock %}

{% block content %}
<div class="container-fluid px-2 px-md-3 py-4">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-xl-2 col-lg-3 col-md-4 mb-4 admin-sidebar-col">
            <div class="card qc-admin-card border-0 shadow-sm rounded-4">
                <div class="card-body text-center p-4">
                    <div class="admin-avatar mb-3 mx-auto" style="width: 80px; height: 80px; border-radius: 50%; background: rgba(16, 185, 129, 0.15); display: flex; align-items: center; justify-content: center; color: #10b981; font-size: 2.2rem;">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-1">Admin Panel</h5>
                    <p class="text-muted small mb-0">{{ get_current_user().name }}</p>
                </div>
            </div>
            
            <!-- Navigation -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 mt-3">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0"><i class="fas fa-cogs me-2"></i>Management</h6>
                </div>
                <div class="card-body p-0">
                    {% include 'admin/_management_sidebar.html' %}
                </div>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="col-xl-10 col-lg-9 col-md-8 admin-main-col">
            <h2 class="mb-4">
                <i class="fas fa-money-bill-wave me-2" style="color: #10b981;"></i>Payment Approvals
            </h2>

            <!-- Pending Payments -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-header qc-admin-card__header border-0 py-3 px-4">
                    <h5 class="mb-0">
                        <i class="fas fa-clock me-2" style="color: #10b981;"></i>Pending Payments ({{ pending_payments|length }})
                    </h5>
                </div>
                <div class="card-body">
                    {% if pending_payments %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Appointment ID</th>
                                    <th>Patient</th>
                                    <th>Doctor</th>
                                    <th>Appointment Date & Time</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>Payment Submitted</th>
                                    <th>Payment Screenshot</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for appointment in pending_payments %}
                                <tr>
                                    <td>
                                        <strong>#{{ appointment.id }}</strong><br>
                                        <a href="{{ url_for('appointments.view_appointment', appointment_id=appointment.id) }}" 
                                           class="btn btn-sm btn-outline-primary mt-1" 
                                           target="_blank"
                                           title="View Appointment Details">
                                            <i class="fas fa-external-link-alt me-1"></i>View
                                        </a>
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ appointment.patient.user.name }}</strong><br>
                                            <small class="text-muted">{{ appointment.patient.user.email }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ appointment.doctor.user.name }}</strong><br>
                                            <small class="text-muted">{{ appointment.doctor.specialization }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <i class="fas fa-calendar me-1"></i>{{ appointment.appointment_date.strftime('%B %d, %Y') }}<br>
                                            <i class="fas fa-clock me-1"></i><small>{{ appointment.appointment_time.strftime('%I:%M %p') }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-{% if appointment.appointment_type == 'video' %}success{% else %}primary{% endif %}" 
                                              style="font-size: 0.85rem; padding: 0.4rem 0.8rem;">
                                            <i class="fas fa-{% if appointment.appointment_type == 'video' %}video{% else %}hospital{% endif %} me-1"></i>
                                            {{ appointment.appointment_type.title() }}
                                        </span>
                                    </td>
                                    <td><strong>PKR {{ "%.0f"|format(appointment.charges) }}</strong></td>
                                    <td>
                                        {% if appointment.payment_submitted_at %}
                                            {{ appointment.payment_submitted_at.strftime('%B %d, %Y at %I:%M %p') }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if appointment.payment_screenshot %}
                                            <a href="/static/uploads/{{ appointment.payment_screenshot }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-eye me-1"></i>View
                                            </a>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="d-flex gap-2">
                                            <form method="POST" action="{{ url_for('admin.approve_payment', appointment_id=appointment.id) }}" class="d-inline">
                                                <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Approve this payment?');">
                                                    <i class="fas fa-check me-1"></i>Approve
                                                </button>
                                            </form>
                                            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal{{ appointment.id }}">
                                                <i class="fas fa-times"></i>Reject
                                            </button>
                                        </div>
                                        
                                        <!-- Reject Modal -->
                                        <div class="modal fade" id="rejectModal{{ appointment.id }}" tabindex="-1">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Reject Payment</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <form method="POST" action="{{ url_for('admin.reject_payment', appointment_id=appointment.id) }}">
                                                        <div class="modal-body">
                                                            <div class="mb-3">
                                                                <label class="form-label">Rejection Reason <span class="text-danger">*</span></label>
                                                                <textarea name="rejection_reason" class="form-control" rows="4" required placeholder="Please provide a clear reason for rejection. This will be shown to the patient."></textarea>
                                                                <small class="text-muted">This reason will be displayed to the patient.</small>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                            <button type="submit" class="btn btn-danger">Reject Payment</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-check-circle text-success mb-3" style="font-size: 3rem;"></i>
                        <p class="text-muted">No pending payments</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Disputed Timeout Payments -->
            <div class="card qc-admin-card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-header qc-admin-card__header--amber border-0 py-3 px-4">
                    <h5 class="mb-0">
                        <i class="fas fa-gavel me-2" style="color: #f59e0b;"></i>Disputed Timeout Payments ({{ disputed_payments|length }})
                    </h5>
                </div>
                <div class="card-body">
                    {% if disputed_payments %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Appointment ID</th>
                                    <th>Patient</th>
                                    <th>Doctor</th>
                                    <th>Slot Date & Time</th>
                                    <th>Amount</th>
                                    <th>Submitted At</th>
                                    <th>Proof</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for appointment in disputed_payments %}
                                <tr>
                                    <td>
                                        <strong>#{{ appointment.id }}</strong><br>
                                        <a href="{{ url_for('appointments.view_appointment', appointment_id=appointment.id) }}" 
                                           class="btn btn-sm btn-outline-primary mt-1" 
                                           target="_blank"
                                           title="View Appointment Details">
                                            <i class="fas fa-external-link-alt me-1"></i>View
                                        </a>
                                    </td>
                                    <td>
                                        <strong>{{ appointment.patient.user.name }}</strong><br>
                                        <small class="text-muted">{{ appointment.patient.user.email }}</small>
                                    </td>
                                    <td>
                                        <strong>{{ appointment.doctor.user.name }}</strong><br>
                                        <small class="text-muted">{{ appointment.doctor.specialization }}</small>
                                    </td>
                                    <td>
                                        <i class="fas fa-calendar me-1"></i>{{ appointment.appointment_date.strftime('%B %d, %Y') }}<br>
                                        <i class="fas fa-clock me-1"></i><small>{{ appointment.appointment_time.strftime('%I:%M %p') }}</small>
                                    </td>
                                    <td><strong>PKR {{ "%.0f"|format(appointment.charges) }}</strong></td>
                                    <td>
                                        {% if appointment.payment_submitted_at %}
                                            {{ appointment.payment_submitted_at.strftime('%B %d, %Y at %I:%M %p') }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if appointment.payment_screenshot %}
                                            <a href="/static/uploads/{{ appointment.payment_screenshot }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-eye me-1"></i>View
                                            </a>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="d-flex gap-2">
                                            <form method="POST" action="{{ url_for('admin.approve_disputed_payment', appointment_id=appointment.id) }}" class="d-inline">
                                                <button type="submit" class="btn btn-sm btn-warning" onclick="return confirm('Approve dispute as valid proof and create refund record?');">
                                                    <i class="fas fa-check me-1"></i>Valid Proof → Refund
                                                </button>
                                            </form>
                                            <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#disputeRejectModal{{ appointment.id }}">
                                                <i class="fas fa-times"></i>Invalid Proof
                                            </button>
                                        </div>

                                        <div class="modal fade" id="disputeRejectModal{{ appointment.id }}" tabindex="-1">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Reject Disputed Payment</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <form method="POST" action="{{ url_for('admin.reject_disputed_payment', appointment_id=appointment.id) }}">
                                                        <div class="modal-body">
                                                            <div class="mb-3">
                                                                <label class="form-label">Rejection Reason <span class="text-danger">*</span></label>
                                                                <textarea name="rejection_reason" class="form-control" rows="4" required placeholder="Provide reason for invalid payment proof."></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                            <button type="submit" class="btn btn-danger">Reject Proof</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-check-circle text-success mb-3" style="font-size: 3rem;"></i>
                        <p class="text-muted">No disputed timeout payments</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Admin avatar styling */
.admin-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    color: #10b981;
}

/* Payment notification badge styling - like WhatsApp */
.payment-badge {
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.list-group-item:hover .payment-badge {
    animation: pulse 1s infinite;
}

.list-group-item.active {
    background: rgba(16, 185, 129, 0.08);
    border: 2.5px solid rgba(16, 185, 129, 0.6);
    color: #10b981;
    font-weight: 600;
    box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.1), 0 8px 32px rgba(16, 185, 129, 0.2);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
}
</style>
{% endblock %}